<template>
  <div class="site-discount">
    <div class="sec-kill">
      <div class="discount-swiper">
        <el-carousel
          :interval="4000"
          type="card"
          height="260px"
          indicator-position="none"
        >
          <el-carousel-item v-for="item in discountSwiperImgUrl" :key="item.id">
            <router-link :to="{ path: '/item', query: { id: item.id } }">
              <img :src="item.url" width="500" height="260" alt="" />
            </router-link>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="discount-nav">
        <img class="discount-nav-img" src="@/assets/img/clock.jpg" alt="" />
        <!-- 下面a标签可以用<router-link to=""></router-link>替换 -->
        <a href="#" class="discount-nav-link"
          ><div class="discount-nav-text">
            <h2>今日秒杀</h2>
            <img src="@/assets/img/lighting.svg" alt="" />
            <p>距离 22:00场结束还剩</p>
            <h3>01:30:00</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="recommend">
      <div class="special-price">
        <el-tabs v-model="activeName" @tab-click="handleSpecialPriceClick">
          <el-tab-pane label="精选" name="first">
            <div class="special-price-item">
              <router-link
                :to="{ path: '/item', query: { id: 22 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item22/img1.png"
                  alt=""
                />
                <h3>Xiaomi真无线降噪耳机3</h3>
                <p><span class="special-price-rmb">￥</span>449</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 2 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item2/img1.png"
                  alt=""
                />
                <h3>小米平板5</h3>
                <p><span class="special-price-rmb">￥</span>1949</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 6 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item6/img1.jpg"
                  alt=""
                />
                <h3>Redmi K40</h3>
                <p><span class="special-price-rmb">￥</span>2199</p>
              </router-link>
            </div>
          </el-tab-pane>
          <el-tab-pane label="优惠" name="second">
            <div class="special-price-item">
              <router-link
                :to="{ path: '/item', query: { id: 12 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item12/img1.jpg"
                  alt=""
                />
                <h3>RedmiBook Pro 14 增强版</h3>
                <p><span class="special-price-rmb">￥</span>4499</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 15 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item15/img1.jpg"
                  alt=""
                />
                <h3>米家互联网对开门冰箱 540L</h3>
                <p><span class="special-price-rmb">￥</span>2799</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 19 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item19/img1.jpg"
                  alt=""
                />
                <h3>小米路由器AX9000</h3>
                <p><span class="special-price-rmb">￥</span>1299</p>
              </router-link>
            </div>
          </el-tab-pane>
          <el-tab-pane label="超值" name="third">
            <div class="special-price-item">
              <router-link
                :to="{ path: '/item', query: { id: 4 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item4/img1.jpg"
                  alt=""
                />
                <h3>米家防缠绕扫拖机器人</h3>
                <p><span class="special-price-rmb">￥</span>1899</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 8 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item8/img1.jpg"
                  alt=""
                />
                <h3>Redmi X65 2022款</h3>
                <p><span class="special-price-rmb">￥</span>3499</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 5 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item5/img1.png"
                  alt=""
                />
                <h3>Xiaomi 12 Pro</h3>
                <p><span class="special-price-rmb">￥</span>5199</p>
              </router-link>
            </div>
          </el-tab-pane>
          <el-tab-pane label="预告" name="fourth">
            <div class="special-price-item">
              <router-link
                :to="{ path: '/item', query: { id: 10 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item10/img1.jpg"
                  alt=""
                />
                <h3>小米电视 ES75 2022款</h3>
                <p><span class="special-price-rmb">￥</span>5999</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 17 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item17/img1.png"
                  alt=""
                />
                <h3>Xiaomi Watch S1</h3>
                <p><span class="special-price-rmb">￥</span>1049</p>
              </router-link>
              <router-link
                :to="{ path: '/item', query: { id: 20 } }"
                class="special-price-item-list"
              >
                <img
                  width="170"
                  height="170"
                  src="@/assets/img/item/item20/img1.jpg"
                  alt=""
                />
                <h3>小米充电宝 20000mAh 50W</h3>
                <p><span class="special-price-rmb">￥</span>209</p>
              </router-link>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="special-price-link">
          <div class="special-price-link-text"><h2>今日特价</h2></div>
          <!-- <div class="special-price-link-button">
            <el-button
              size="mini"
              icon="el-icon-arrow-right"
              circle
            ></el-button>
          </div> -->
        </div>
      </div>
      <div class="new-arrival">
        <div class="new-arrival-link">
          <!-- <div class="new-arrival-link-button">
            <el-button
              size="mini"
              icon="el-icon-arrow-right"
              circle
            ></el-button>
          </div> -->
          <div class="new-arrival-link-text"><h2>新品首发</h2></div>
        </div>
        <div class="new-arrival-swiper">
          <el-carousel
            :interval="5000"
            height="250px"
            arrow="always"
            indicator-position="none"
          >
            <el-carousel-item v-for="item in newArrivalItem" :key="item.itemId">
              <router-link
                class="new-arrival-swiper-item"
                :to="{ path: '/item', query: { id: item.itemId } }"
              >
                <img
                  class="new-arrival-swiper-img"
                  :src="item.itemSwiperImgUrl[0].url"
                  alt=""
                />
                <h3 class="new-arrival-swiper-title">{{ item.title }}</h3>
                <h4>来这里发现更多新品</h4>
                <p class="new-arrival-swiper-price">
                  <span class="new-arrival-swiper-price-rmb">￥</span
                  >{{ item.discountPrice }}
                </p>
              </router-link>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="coupon">
        <div class="coupon-link">
          <!-- <div class="coupon-link-button">
            <el-button
              size="mini"
              icon="el-icon-arrow-right"
              circle
            ></el-button>
          </div> -->
          <div class="coupon-link-text"><h2>优惠中心</h2></div>
        </div>
        <div class="coupon-inner">
          <div class="coupon-inner-item">
            <div class="par">
              <h2 class="coupon-inner-item-title">XXXXXX折扣店</h2>
              <p class="coupon-inner-item-price-box">
                <span class="coupon-inner-item-price-rmb">￥</span>
                <span class="coupon-inner-item-price">50.00</span>
                <span class="coupon-inner-item-mark">优惠券</span>
              </p>
              <h4 class="coupon-inner-item-condition">订单满100.00元生效</h4>
            </div>
            <div class="copy">
              <h3>副券</h3>
              <p>2021-12-13<br />2022-01-13</p>
              <a href="#">立即领取</a>
            </div>
          </div>
          <div class="coupon-inner-item">
            <div class="par">
              <h2 class="coupon-inner-item-title">XXXXXX折扣店</h2>
              <p class="coupon-inner-item-price-box">
                <span class="coupon-inner-item-price-rmb">￥</span>
                <span class="coupon-inner-item-price">50.00</span>
                <span class="coupon-inner-item-mark">优惠券</span>
              </p>
              <h4 class="coupon-inner-item-condition">订单满100.00元生效</h4>
            </div>
            <div class="copy">
              <h3>副券</h3>
              <p>2021-12-13<br />2022-01-13</p>
              <a href="#">立即领取</a>
            </div>
          </div>
          <div class="coupon-inner-item">
            <div class="par">
              <h2 class="coupon-inner-item-title">XXXXXX折扣店</h2>
              <p class="coupon-inner-item-price-box">
                <span class="coupon-inner-item-price-rmb">￥</span>
                <span class="coupon-inner-item-price">50.00</span>
                <span class="coupon-inner-item-mark">优惠券</span>
              </p>
              <h4 class="coupon-inner-item-condition">订单满100.00元生效</h4>
            </div>
            <div class="copy">
              <h3>副券</h3>
              <p>2021-12-13<br />2022-01-13</p>
              <a href="#">立即领取</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SiteDiscount",
  data() {
    return {
      activeName: "first",
      discountSwiperImgUrl: [
        { id: 5, url: require("@/assets/img/banner/banner1.jpg") },
        { id: 2, url: require("@/assets/img/banner/banner2.jpg") },
        { id: 3, url: require("@/assets/img/banner/banner3.png") },
        { id: 4, url: require("@/assets/img/banner/banner4.jpg") },
      ],
      newArrivalItem: [],
    };
  },
  methods: {
    handleSpecialPriceClick(tab, event) {
      console.log(tab, event);
    },
  },
  created() {
    this.newArrivalItem = this.$store.state.items;
  },
};
</script>

<style scoped>
.site-discount {
  margin-top: 40px;
}

@import url("../../assets/css/home/HomeDiscountSecKill.css");
@import url("../../assets/css/home/HomeDiscountRecommend.css");
</style>